<!--
 * @Author: 王灿
 * @Date: 2019-11-09 00:40:05
 * @LastEditTime: 2019-12-03 00:01:40
 * @Description: 订单退货
 * @FilePath: \scarlet-sparrow-admin\src\views\order\order-refund\index
-->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 订单列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 订单Id -->
        <el-table-column prop="orderId" label="订单Id"></el-table-column>
        <!-- 退货原因 -->
        <el-table-column label="退货原因">
          <template slot-scope="scope">
              <jq-tooltip :content="scope.row.causeContent" />
          </template>
        </el-table-column>
        <!-- 详细描述 -->
        <el-table-column label="详细描述">
          <template slot-scope="scope">
              <jq-tooltip :content="scope.row.content" />
          </template>
        </el-table-column>
        <!-- 申请时间 -->
        <el-table-column prop="createAt" label="申请时间"></el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div class="public-table__status-wrapper">
              <span :class="orderStatus[scope.row.status].className"></span>
              <span>{{ orderStatus[scope.row.status].label }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 7" @click="onPass(scope.row.id)" type="text" size="small">通过</el-button>
            <el-button v-if="scope.row.status === 7" @click="onReject(scope.row.id)" type="text" size="small" class="active">驳回</el-button>
            <el-button v-if="scope.row.status === 8" @click="onComplete(scope.row.id)" type="text" size="small">完成</el-button>
            <el-button v-if="scope.row.status !== 7 && scope.row.status !== 8" type="text" size="small">----</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

     <!-- 设置vip -->
    <el-dialog title="退货驳回" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <refund-reject @onCancelBtn="onCancelBtn" :refundId="refundId" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import RefundReject from './refund-reject/index.vue'
import { getRefundList, getRefundApproval, getRefundFinish } from '@/api/order.js'
export default {
  name: 'Order',
  components: { JqTitle, JqTooltip, JqPage, RefundReject },
  data() {
    return {
      title: { label: '订单退货', flag: false, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      refundId: 0,
      isShow: false,
      isRefresh: false,
      orderStatus: [ 
          {label: '待付款', className: 'public-table__status-first', status: 0},
          {label: '待发货', className: 'public-table__status-second', status: 1},
          {label: '待收货', className: 'public-table__status-third', status: 2},
          {label: '待结算', className: 'public-table__status-fourth', status: 3},
          {label: '已完成', className: 'public-table__status-fifth', status: 4},
          {label: '待评价', className: 'public-table__status-first', status: 5},
          {label: '待回收', className: 'public-table__status-second', status: 6},
          {label: '售后--待处理', className: 'public-table__status-third', status: 7},
          {label: '售后--处理中', className: 'public-table__status-fourth', status: 8},
          {label: '售后--处理驳回', className: 'public-table__status-fifth', status: 9},
          {label: '售后--已处理', className: 'public-table__status-first', status: 10},
          {label: '取消订单', className: 'public-table__status-second', status: 11}
       ]
    }
  },
  created() {
    this.onGetRefundList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetRefundList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetRefundList()
    },
    // 监听刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetRefundList()
      }
    }
  },
  methods: {
    // 订单数据
    onGetRefundList() {
      getRefundList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 通过
    onPass(refundId) {
      this.$confirm('同意退换货，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('refundId', refundId) 
          getRefundApproval(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetRefundList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 驳回
    onReject(refundId) {
      this.refundId = refundId
      this.isShow = true
    },
    // 完成
    onComplete(refundId) {
      this.$confirm('该订单确认处理完成，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('refundId', refundId) 
          getRefundFinish(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetRefundList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 成功 / 取消
    onCancelBtn(data) {
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh
    }
  }
}
</script>

<style lang="scss" scoped>
.public {
  .public-table__status-wrapper {
    width: 100%;
    height: 100%;
    @include row;
    span {
      &:first-child {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
      }
      &.public-table__status-first {
        background: #fe5c5c;
      }
      &.public-table__status-second {
        background: #e6a23c;
      }
      &.public-table__status-third {
        background: #909399;
      }
      &.public-table__status-fourth {
        background: #409eff;
      }
      &.public-table__status-fifth {
        background: #96b327;
      }
    }
  }
}
</style>